<template>
	<view class="container">
		<!-- 顶部 -->
		<view style="width: 100%;height: 28vw;display: flex;justify-content: space-around;align-items: center;" class="top">
			<view style="width: 20%;height: 100%;display: flex;justify-content: center;align-items: center;">
				<!-- <view style="width: 20%;height: 100%;"></view>
				<view style="width: 100%;height: 11%;"></view> -->
				<view style="width: 13vw;height: 13vw;border-radius: 50%;">
					<image style="width: 100%; height: 100%; border-radius: 50%;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + userInfo.memberUserPhoto" mode=""></image>
					<!-- <u-avatar :src="src" style="size: 40;"></u-avatar> -->
					<!-- <u-avatar :text="text"></u-avatar> -->
				</view>
			</view>
			<view style="width: 60%;height: 100%;">
				<view style="width: 100%;height: 25%;"></view>
				<input v-model="value" :type="type" :border="border" placeholder="搜素相关课程、教练"
					style="width: 90%;height: 50%;border-radius: 50px;margin: 0 auto;text-align: center;background-color: rgb(243, 247, 255);" />
				<!-- <span style="line-height: 6.5vh;font-size: 15px;color: rgb(229, 229, 229);">搜素相关课程、教练</span> -->
				<!-- </view> -->
			</view>
			<view style="width: 20%;height: 100%;display: flex;justify-content: center;align-items: center;">
				<!-- <view style="width: 20%;height: 100%;"></view>
				<view style="width: 100%;height: 11%;"></view> -->
				<view class="avatar" style="width: 13vw;height: 13vw;border-radius: 50%;">
						<image style="width: 100%; height: 100%; border-radius: 50%;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + 6235" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 中心 -->
			<view class="div1 fl-col" style="display: flex;align-items: center;">
				<view class="training_data fl-center">

					<view class="train_time fl-col box">
						<view class="title">
							今日训练时长
						</view>
						<!-- <view id="trainT_chart"></view> -->
						<view class="" style="width: 100%;height: 20vw;">
							<l-echart ref="chart1" @finished="init" style="width: 20vw;height: 20vw;"></l-echart>
						</view>
					</view>

					<view class="calo fl-col box">
						<view class="title">
							燃烧卡路里
						</view>
						<view class="calo_bottom fl-spa">
							<view class="calo_l fl-col" style="display: flex;flex-direction: column;justify-content: start;">
								<view class="calo_exp fl-col">
									<view class="expect_text">预计消耗</view>
									<view class="kcal fl-spa" style="display: flex;justify-content: space-around;align-items: center;">
										<view class="kcal_icon">
											<image src="../../static/icon1.png" mode="" style=""></image>
										</view>
										<view class="kcal_data">
										 <!-- <view v-if="bodysex === 0">
										    {{ (((88.362 + (13.397 * userWeight) + (4.799 * bodyheight) - (5.677 * bodyage)) * 2.4) / 24 * totalCourseTime1).toFixed(2) }}
										  </view>
										  <view v-else-if="bodysex === 1">
										    {{ (((447.593 + (9.247 * userWeight) + (3.098 * bodyheight) - (4.330 * bodyage)) * 2.4) / 24 * totalCourseTime1).toFixed(2) }}
										  </view> -->
										  <view>{{plankcal}}</view>
										</view>

										<view class="kcal_unit">
											kcal
										</view>
									</view>
								</view>

								<view class="calo_act fl-col">
									<view class="act_text">实际消耗</view>
									<view class="kcal fl-spa" style="display: flex;justify-content: space-around;align-items: center;">
										<view class="kcal_icon">
											<image src="../../static/icon2.png" mode="" style=""></image>
										</view>
										<view class="kcal_data">
										  <!-- <view v-if="bodysex === 0">
										    {{ (((88.362 + (13.397 * userWeight) + (4.799 * bodyheight) - (5.677 * bodyage)) * 2.4) / 24 * totalCourseTime2).toFixed(2) }}
										  </view>
										  <view v-else-if="bodysex === 1">
										    {{ (((447.593 + (9.247 * userWeight) + (3.098 * bodyheight) - (4.330 * bodyage)) * 2.4) / 24 * totalCourseTime2).toFixed(2) }}
										  </view> -->
										  <view>{{nowkcal.toFixed(2) }}</view>
										</view>

										<view class="kcal_unit">
											kcal
										</view>
									</view>
								</view>
							</view>
							<view class="fl-col" style="width: 18vw;height: 15vw;display: flex;flex-direction: column;align-items: center;justify-content: center;">
								<view class="" style="color: #707070;font-size: 2.5vw;">
									计划
								</view>
								<l-echart ref="chart2" @finished="init2" style="width: 10vw;height: 10vw;"></l-echart>
							</view>
						</view>
					</view>
				</view>

				<view class="weight_record box"
					style="width: 86.7vw;height: 18vw;margin: 3.2vw 0 5vw 0;padding: 2.5vw;box-sizing: border-box;">
					<view class="title">
						体重记录
					</view>
					<view class="weight_bottom fl-spa" style="display: flex;align-items: center;margin-top: 0.6vw;">
						<view class="" style="font-size: 4vw;color: #92A3FD;">{{userWeight}}kg</view>
						<view class="line_col" style="width: 1px;height: 4.6vw;background-color: #000000;"></view>
						<!-- margin: 0 2.6vw 0 1.5vw; -->
						<view class="" style="font-size: 2.4vw;color: #9C9C9C;">
						  {{ userLastWeight >= userWeight ? '今日已减' + (userLastWeight - userWeight) + 'kg' : '今日已增' + (userWeight - userLastWeight) + 'kg' }}
						</view>
						<view class="check_weight fl-center">
							<view class="" style="font-size: 3.1vw;color: #FFFFFF;line-height: 6vw;" @click="gotoWeighDetails()">查看记录</view>
						</view>
					</view>
				</view>

				<view class="exercise box" style="width: 86.7vw;height: 115vw;padding: 2.5vw;box-sizing: border-box;margin-bottom: 50px;">
					<view class="title">
						锻炼详情
					</view>
					<view class="line_chart_box">
						<view class="" style="width: 83vw;height: 38.5vw;">
							<l-echart ref="chart3" @finished="init3" style="width: 83vw;height: 38.5vw;"></l-echart>
						</view>
					</view>
					<view class="compare_chart_box">
						<view class="month fl-spb" style="padding: 0 2.5vw;">
							<view class="" style="font-size: 2.7vw;color: #7B6F72;">{{ currentMonth }}月</view>
							<view class="" style="font-size: 2.7vw;color: #7B6F72;">{{ nextMonth }}月</view>
						</view>
						 <view style="height: 200px; overflow-y: scroll;">
											    <view class="progress-bar" v-for="(item, index) in timeArray" :key="index">
													<text>{{ item }}</text> 
													
													<view style="width: 100%;">
											      <text class="percentage">{{ resultArray[index] }}%</text>
											      <view class="progress" >
													  <view :style="{ width: resultArray[index] + '%' }" style="background-color: #FDB0B0;height: 20px;border-radius: 10px;" ></view>
											    </view>
												</view>
											  </view>
					</view>
				</view>
			</view>
		<!-- <view class="tabbar_box" style="position: fixed;left: 0;bottom: 0;width: 100%;height: 50px;background-color: #000;z-index: 9999;"> -->	
		</view>
	</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				// 计划消耗
				plankcal:0,
				// 实际消耗
				nowkcal:0,
				showChart:false,
				// 日期列表
				timeArray:[],
				// 百分比列表
				resultArray:[],
				// 当前月
				currentMonth: '',
				// 下月
				nextMonth: '',
				// 每月月初体重数据
				maxWeights:[],
				// 每月月末体重数据
				minWeights:[],
				// 月份
				months:[],
				// 
				totalCourseTime1: 0, // 后端传递的 totalCourseTime1 值
				totalCourseTime2: 0, // 后端传递的 totalCourseTime2 值
				// 用户上一次体重
				userLastWeight:0,
				// 用户第一次体重
				bodyheight:0,
				// 用户年龄
	            bodyage:0,
				// 用户性别
				bodysex:0,
				// 用户体重
				userWeight:0,
				// 用户信息
				userInfo:{},
				value: '',
				type: 'text',
				border: true,
				// values: 'orange',
				// src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				// text: '无头像'
				 option: {
				       },
				option2: {	
				},
				option4: {}
			}
		},
		  mounted() {
		    // 获取当前日期
		    const today = new Date();
		    
		    // 获取当前月份
		    this.currentMonth = today.getMonth() + 1;
		    
		    // 计算下个月份
		    this.nextMonth = (today.getMonth() + 2) > 12 ? 1 : today.getMonth() + 2;
			
		  },
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				this.userInfo =uni.getStorageSync('userInfo')
				this.bodyage=this.userInfo.memberUserAge
				this.bodyheight=this.userInfo.memberUserHeight
				this.bodysex = this.userInfo.memberUserSex
			}
			this.getStudentTrainingTime()
			this.getStudentTrainingWeight()
			this.getStudentTrainingLastWeight()
			this.getStudentTrainingSixWeight()
			this.getStudentTrainingMonth()
		},
		onReady() {
			// this.init_pieChart1()
			// this.$refs.chart.init(echarts, chart => {
			// 	chart.setOption(this.option);
			// });
			// this.$refs.chart2.init(echarts, chart => {
			// 	chart2.setOption(this.option2);
			// });
			// this.$refs.chart3.init(echarts, chart => {
			// 	chart3.setOption(this.option3);
			// });
			// this.$refs.chart4.init(echarts, chart => {
			// 	chart4.setOption(this.option4);
			// });
		},
		methods: {
			// 获取训练时间
			getStudentTrainingMonth(){
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getStudentTrainingMonth',
					data: {
						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier
					},
					success: (res) => {
						 if (res.data.data.data && res.data.data.data.resultArray && res.data.data.data.resultArray.length > 0 && res.data.data.data.timeArray && res.data.data.data.timeArray.length > 0) {
							 
							 this.timeArray=res.data.data.data.timeArray
							 this.resultArray=res.data.data.data.resultArray
							 // this.showChart = true
						  //       this.init4();
						  //     } else {
						  //       this.showChart = false;
						      }
					},
				})
			},
			// 获取近六个月的体重变化
			getStudentTrainingSixWeight(){
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getStudentTrainingSixWeight',
					data: {
						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier
					},
					success: (res) => {
						this.maxWeights=res.data.data.data.maxWeights
						this.minWeights=res.data.data.data.minWeights
						this.months=res.data.data.data.months
						this.init3();
					},
				})
			},
			// 获取上一次体重记录
			getStudentTrainingLastWeight(){
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getStudentTrainingLastWeight',
					data: {
						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier
					},
					success: (res) => {
						this.userLastWeight =res.data.data.data
					},
					})
			},
			// 获取体重记录
			getStudentTrainingWeight(){
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getStudentTrainingWeight',
					data: {
						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier
					},
					success: (res) => {
						this.userWeight =res.data.data.data
						if(res){
							this.getStudentNowkcal()
					}
					}
					})
			},
			// 获取并计算卡路里消耗
			getStudentNowkcal(){
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getStudentNowkcal',
					data: {
						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier
					},
					success: (res) => {
						this.nowkcal = res.data.data.data
						if (this.bodysex === 0) {
							this.plankcal = (((88.362 + (13.397 * this.userWeight) + (4.799 * this
									.bodyheight) - (5.677 * this.bodyage)) * 2.4) / 24 * this
								.totalCourseTime1).toFixed(2)
						} else {
							this.plankcal = (((447.593 + (9.247 * this.userWeight) + (3.098 * this
									.bodyheight) - (4.330 * this.bodyage)) * 2.4) / 24 * this
								.totalCourseTime1).toFixed(2)
							this.init2();
						}
						}
				})	
			},
			// 获取训练时间
			getStudentTrainingTime() {
				uni.request({
					url: 'http://127.0.0.1:17000/studentTraining/getStudentTrainingTime',
					data: {

						id: this.userInfo.id,
						venueUniqueIdentifier: this.userInfo.venueUniqueIdentifier

					},
					success: (res) => {
						this.totalCourseTime1 = parseFloat(res.data.data.data.totalCourseTime1);
						this.totalCourseTime2 = parseFloat(res.data.data.data.totalCourseTime2);
						this.init();
					},
					})
			},
			goMy() {
				uni.navigateTo({
					url: '/pages/index/my',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			goIndex() {
				console.log("跳转到首页");
				uni.navigateTo({
					url: '/pages/index/index',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			goClass() {
				uni.navigateTo({
					url: '/pages/index/class',
					animationType: 'slide-out-top',
					animationDuration: 200
				})
			},
			  async init() {
			          this.option.series = [{
			             type: 'pie',
			             data: [
			               {
			                 value: this.totalCourseTime2 * 60,
			                 name: '',
			               },
			               {
			                 value: (this.totalCourseTime1 - this.totalCourseTime2) * 60,
			                 name: '',
			               },
			             ],
			             radius: ['80%', '90%'],
			             labelLine: {
			               show: false,
			             },
			             itemStyle: {
			               normal: {
			                 color: '#DEEEFF',
			               },
			               emphasis: {
			                 color: '#9ECFFF',
			               },
			             },
			             visualMap: {
			               show: false,
			               min: 0,
			               max: this.totalCourseTime2 * 60,
			               dimension: 1,
			               inRange: {
			                 color: ['#9ECFFF'],
			               },
			             },
			           }];
			     
			           this.option.title = {
			             text: `${this.totalCourseTime2 * 60}分钟`,
			             left: 'center',
			             top: 'center',
			             textStyle: {
			               fontSize: 10,
			             },
			           };
			        const chart = await this.$refs.chart1.init(echarts);
			        chart.setOption(this.option);
			      },
			async init2() {
				this.option2.title = {
					text: `${this.nowkcal}卡路里`,
					left: 'center',
					top: 'center',
					textStyle: {
						fontSize: 10 // 设置标题字体大小  
					}
				},
				this.option2.series = [{
					type: 'pie',
					data: [{
							value: this.nowkcal,
							name: 'A'
						},
						{
							value: this.totalCourseTime1 * 60,
							name: 'B'
						}
					],
					radius: ['80%', '90%'],
					labelLine: {
						show: false
					},
					itemStyle: {
						// 普通样式。
						normal: {
							// 点的颜色。
							color: '#E8ECFF'
						},
						// 高亮样式。
						emphasis: {
							// 高亮时点的颜色。
							color: '#92A3FD'
						}
					},
				}]
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chart2.init(echarts);
				chart.setOption(this.option2)
			},
			async init3() {
				 const chart = await this.$refs.chart3.init(echarts);
				    const option3 = {
				      grid: {
				        left: '5%',
				        right: '10%',
				        top: '15%',
				        bottom: '15%'
				      },
				      xAxis: {
				        data: this.months.map(month => month + '月'),
				      },
				      yAxis: {
				        position: 'right',
				        type: 'value',
				        formatter: '{value}%'
				      },
				      series: [
				        {
				          data: this.maxWeights,
				          type: 'line',
				          smooth: true,
				          lineStyle: {
				            color: '#92A3FD',
				            width: 2
				          },
				          itemStyle: {
				            color: '#9DCEFF',
				            borderColor: '#9DCEFF'
				          }
				        },
				        {
				          data: this.minWeights,
				          type: 'line',
				          smooth: true,
				          lineStyle: {
				            color: '#FCD6D6',
				            width: 2
				          },
				          itemStyle: {
				            color: '#FDB0B0',
				            borderColor: '#FDB0B0'
				          }
				        }
				      ]
				    }
				
				    chart.setOption(option3); // 使用 option3 对象
			},
			async init4() {
			  if (!this.$refs.chart4) {
			    // 处理 this.$refs.chart4 不存在的情况
			    return;
			  }
			  this.option4 = {
			    grid: {
			      left: '5%',
			      top: '5%',
			      right: '5%',
			      bottom: '5%',
			      containLabel: true
			    },
			    xAxis: {
			      type: 'value',
			      splitLine: {
			        show: false
			      },
			      axisLabel: {
			        show: false
			      },
			      axisTick: {
			        show: false
			      },
			      axisLine: {
			        show: false
			      }
			    },
			    yAxis: [
			      {
			        type: 'category',
			        axisTick: {
			          show: false
			        },
			        axisLine: {
			          show: false
			        },
			        axisLabel: {
			          color: '#7B6F72',
			          fontSize: 12
			        },
			        data: this.timeArray
			      },
			      {
			        type: 'category',
			        axisTick: {
			          show: false
			        },
			        axisLine: {
			          show: false
			        },
			        axisLabel: {
			          color: '#7B6F72',
			          fontSize: 12
			        },
			        data: this.timeArray
			      }
			    ],
			    series: [
			      {
			        name: '%',
			        type: 'bar',
			        barWidth: 19,
			        data: this.resultArray,
			        label: {
			          show: true,
			          position: 'right',
			          offset: [0, -15],
			          formatter: '{c}{a}',
			          color: 'black',
			          fontSize: 12
			        },
			        itemStyle: {
			          normal: {
			            barBorderRadius: 10,
			            color: '#FDB0B0'
			          }
			        },
			        zlevel: 1
			      },
			      {
			        name: '进度条背景',
			        type: 'bar',
			        barGap: '-100%',
			        barWidth: 19,
			        data: new Array(this.timeArray.length).fill(100),
			        color: '#92A3FD',
			        itemStyle: {
			          normal: {
			            barBorderRadius: 10,
			            marginBottom: 12
			          }
			        }
			      }
			    ]
			  };
			  const chart = await this.$refs.chart4.init(echarts);
			  chart.setOption(this.option4);
			},
			//跳转课程页面
			gotoWeighDetails(){
				uni.navigateTo({
					// 传递参数拼接路径 如：'/pages/index/weighDetails?id=1'
					url: '/pages/index/weighDetails'
					
				})
			}
		} 
	}
</script>

<style>
	/* 设置背景图片 */
	.container {
		/* display: flex; */
		width: 750rpx;
		justify-content: center;
		align-items: center;
		/* height: 100%; */
		background: linear-gradient(223.47deg, rgba(146, 163, 253, 1) 0%, rgba(157, 206, 255, 1) 100%);
		position: relative;
		/* background: blue; */
		/* background-image: url("https://img.js.design/assets/img/625aea28bd06c1a5e27ed094.png"); */
		/* background-size: cover; */
	}

	.div1 {
		width: 100%;
		height: calc(80%-100px);
		background: rgba(255, 255, 255, 1);
		/* background-color: red; */
		border-radius: 100px 100px, 0px, 0px;
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;
		padding-top: 4.6vw;
		/* overflow-y: scroll; */
	}

	.img1 {
		width: 100%;
		height: 100%;
	}

	.box {
		/* display: flex; */
		box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.2);
		border-radius: 15px;
		background-color: #fff;
		padding: 8rpx 18rpx;
		box-sizing: border-box;
	}

	.fl-col {
		display: flex;
		flex-direction: column;
	}

	.fl-spa {
		display: flex;
		justify-content: space-around;
	}

	.fl-center {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		color: #000;
		
	}

	.training_data {
		width: 750rpx;
		/* margin-top: 4.6vw; */
	}

	.train_time {
		width: 40vw;
		height: 23vw;
		margin-right: 6vw;
	}

	.calo {
		width: 40vw;
		height: 21vw;
	}

	.calo_exp {
		width: 19vw;
		position: relative;
		padding: 1.2vw;
		margin-left: 2vw;
	}

	.calo_exp::before {
		content: "";
		display: block;
		height: 4.6vw;
		border-left: 2px solid #CCD7FF;
		position: absolute;
		left: 0;
		top: 10%;
	}

	.calo_act {
		width: 19vw;
		position: relative;
		padding: 1.2vw;
		margin-left: 2vw;
	}

	.calo_act::before {
		content: "";
		display: block;
		height: 4.6vw;
		border-left: 2px solid #FEC4D6;
		position: absolute;
		left: 0;
		top: 10%;
	}

	.expect_text {
		font-size: 1.4vw;
		color: #9797A8;
	}

	.act_text {
		font-size: 1.4vw;
		color: #9797A8;
	}

	.kcal {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.fl-spb {
		display: flex;
		justify-content: space-between;
	}

	.kcal_icon {
		width: 2.7vw;
		height: 2.7vw;
		position: relative;
	}

	.kcal_icon image {
		width: 2.6vw;
		height: 2.6vw;
		position: absolute;
		left: 0;
		top: 0;
	}

	.kcal_data {
		color: #2F2F51;
		font-size: 2.9vw;
	}

	.kcal_unit {
		font-size: 2.4vw;
		color: #9797A8;
	}


	.check_weight {
		width: 22.6vw;
		height: 6vw;
		border-radius: 3vw;
		background: linear-gradient(135deg, #92A3FD 0%, #9ECFFF 100%);
	}
	
	.month {
		margin: 6vw 0 2.8vw 0;
	} 
	.progress-bar {
	  text-align: center;
	  display: flex;
	  align-items: center;
	  margin-bottom: 10px;
	}
	
	.progress-bar text {
	  margin-right: 10px;
	  color: #7B6F72;
	  font-size: 12px;
	}
	
	.progress {
	  height: 20px;
	  width: 70vw;
	  background-color: #faffdc;
	  border-radius: 10px;
	}
	.progress-inner {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.percentage {
	  display: block;
	  width: 100%;
	  text-align: center;
}
	.top{
		padding-top:16px;
	}
</style>